import React from 'react';
import {View} from 'react-native';
import {defaultNavigationConfigure} from "../../base/navconfig";
import {LoadingView} from "react-native-dsxui";
import ScrollableTabView, {ScrollableTabBar} from "react-native-scrollable-tab-view";
import {Colors} from "../../styles";
import {ApiClient} from "../../utils";
import CourseListComponent from "./CourseListComponent";

export default class DiscoverIndex extends React.Component {

    static navigationOptions = ({navigation}) => ({
        ...defaultNavigationConfigure(navigation),
        headerTitle: '发现',
        headerLeft: null,
        headerRight: null
    });

    constructor(props) {
        super(props);
        this.state = {
            isLoading: true,
            subjects: []
        };
    }


    render(): React.ReactNode {
        if (this.state.isLoading) return <LoadingView/>;

        let contents = this.state.subjects.map((item, index) => {
            return (
                <CourseListComponent
                    subjectId={item.subject_id}
                    onPressItem={(item) => {
                        this.props.navigation.navigate('CourseDetail', {course_id: item.id});
                    }}
                    tabLabel={item.title}
                    key={index.toString()}
                />
            )
        });
        return (
            <ScrollableTabView
                renderTabBar={() => <ScrollableTabBar
                    style={{
                        borderBottomWidth: 0.5,
                        backgroundColor: '#fff',
                        borderBottomColor: '#e0e0e0'
                    }}
                    tabStyle={{
                        paddingLeft: 0,
                        paddingRight: 0,
                        paddingTop: 12,
                        paddingBottom: 15,
                        marginLeft:10,
                        marginRight:10
                    }}
                />}
                tabBarActiveTextColor={Colors.primary}
                tabBarInactiveTextColor="#222"
                tabBarUnderlineStyle={{
                    backgroundColor: Colors.primary,
                    height: 3,
                    bottom: -1
                }}
                tabBarTextStyle={{fontSize: 16}}
                initialPage={0}
                style={{
                    backgroundColor: '#f2f2f2'
                }}
            >
                {contents}
            </ScrollableTabView>
        );
    }

    componentDidMount(): void {
        ApiClient.get('/subject/batchget').then(response => {
            const subjects = response.data.items;
            this.setState({
                subjects,
                isLoading: false
            });
        });
    }
}
